<template>
    <div class="jd-self">
        <JdHeader title="首页" back>
            <template #title>
                <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
            </template>
            <template #right>
                <van-button @click="searchHandler" size="small" type="success">搜索</van-button>
            </template>
        </JdHeader>

        <!-- 搜索相关的内容显示 -->
        <!-- 如果searchText没有文本时显示 -->
        <!-- <JdSearchHistory v-if="!searchText"></JdSearchHistory> -->
        <!-- 如果searchText有文本时显示 -->
        <!-- <JdSearchList v-else></JdSearchList> -->

        <!-- 当searchText为true的时候 渲染 JdSearchList组件-->
        <!-- 当searchText为false的时候 渲染 JdSearchHistory组件-->
        <component :is="searchText ? JdSearchList : JdSearchHistory"></component>
    </div>
</template>

<script setup lang="ts">
import JdSearchHistory from './components/JdSearchHistory.vue';
import JdSearchList from './components/JdSearchList.vue';
import { ref, watch, provide } from 'vue'
import { useRouter, type Router } from 'vue-router';

// 导入api请求接口
import { searchListApi } from '@/api/goods'

// 导入相关ts接口
import type { MyHotItem } from '@/config/interface'
const $router: Router = useRouter()

// 准备一个数据和文本框交互
const searchText = ref<string>('')

// 准备一个点击搜索按钮的方法
const searchHandler = () => {
    const text = searchText.value.trim()
    // 非空验证
    if (!text) return

    // 跳转路由
    $router.push({ path: '/list', query: { search: text } })
}
// 随着搜索的关键字变化实时请求最新的相关的数据展示
// 准备一个数据,表示搜索列表
const searchList = ref<MyHotItem[]>([])
// 利用watch 监控 seatchText
watch(searchText, async () => {
    if (!searchText.value.trim()) return

    const res = await searchListApi(searchText.value.trim())
    console.log(res);
    searchList.value = res.data

})

provide('searchList', searchList)
</script>

<style scoped lang="scss">

</style>